<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="time" class="box">
        2021-3-2
    </div>
    <div class="soon">我是第一个</div>
    <div class="soon">我是第二个</div>
    <ul>
        <li>知否知否1</li>
        <li>知否知否2</li>
        <li>知否知否3</li>
        <li>知否知否4</li>
        <li>知否知否5</li>
    </ul>
    <ol>
        <li>生僻字</li>
        <li>生僻字</li>
        <li>生僻字</li>
        <li>生僻字</li>
        <li>生僻字</li>
    </ol>
    <script>
        //文档页面从上往下加载，所以script写html下面
        //返回的是一个元素对象
        var timer = document.getElementById('time');
        console.log(timer);
        console.log(typeof timer);
        //打印我们返回的元素对象 更好查看里面的属性和方法
        console.dir(timer);

        //返回的是获取过来元素对象的集合，以伪数组存储
        var lis = document.getElementsByTagName('li');
        console.log(lis);
        for(var i=0;i<lis.length;i++){
            console.log(lis[i]);
        }
        //先获取页面中的ol的伪数组，再使用伪数组内的第一项
        //因为父元素必须是单个元素
        var ols = document.getElementsByTagName('ol');
        console.log(ols[0].getElementsByTagName('li'));
        
        //H5新增获取对象方法
        //根据类名
        var boxs=document.getElementsByClassName('box');
        console.log(boxs);
        //大一统获取方法  包括id，类，标签
        //querySelector 返回指定选择器的第一个元素对象
        var firstbox=document.querySelector('.box');
        console.log(firstbox);
        //获取指定的全部
        var all = document.querySelectorAll('.soon');
        console.log(all);
        
        //获取body和html元素
        var bodyEle=document.body;
        console.log(bodyEle);
        var htmlEle=document.documentElement;
        console.log(htmlEle);
        
    </script>
</body>

</html>